<div id="{{config.name}}" class="dynamic-field form-explorer form-element" [formGroup]="group" [ngClass]="fieldShow" [class.has-tooltip]="config.tooltip" *ngIf="!config['isHidden']"
    ix-auto ix-auto-type="explorer" ix-auto-identifier='{{config.placeholder}}'>

        <div class="label-container">
          <label>
            {{config.placeholder | translate}}
            <span *ngIf="config.required">*</span>
          </label>
          <tooltip class="formexinput-tooltip" *ngIf="config.tooltip" [header]="config.placeholder" [message]="config.tooltip"></tooltip>
        </div>

        <div class="tbody">
        <div class="form-ex-flex-container tr" id="form-ex-flex-container">
        <div id="box1" class="td">
            <button mat-icon-button aria-label="Toggle Tree" type="button" (click)="toggleTree()" [disabled]="config.disabled"
                ix-auto
                ix-auto-type="button"
                ix-auto-identifier='main-folder'>
                <mat-icon class="explorer-folder">create_new_folder</mat-icon>
            </button>
        </div>

        <div id="box2" class="td">
            <mat-form-field class="full-width" id="formexinput">
                <textarea matInput *ngIf="config.multiple; else textInput" [placeholder]="config.placeholder | translate" [formControlName]="config.name" [required]="config.required"></textarea>
                <ng-template #textInput>
                    <input matInput [type]="'text'" [placeholder]="config.placeholder | translate" [formControlName]="config.name" [required]="config.required"
                        ix-auto
                        ix-auto-type="input"
                        ix-auto-identifier="{{config.name}}">
                </ng-template>
            </mat-form-field>
        </div>

      </div>
        </div>

        <div class="tree-container" [ngClass]="{'borderless': !treeVisible}">
        <tree-root #tree id="form-ex-input" *ngIf="treeVisible && !config.disabled" [nodes]="nodes" [options]="customTemplateStringOptions" [focused]="true" id="box3" (select)="onClick($event)" (deselect)="onClick($event)" (toggleExpanded)="onToggle($event)" (loadNodeChildren)="loadNodeChildren($event)">
            <ng-template #treeNodeTemplate let-node *ngIf="(config.explorerType == 'zvol')">
                <mat-icon>folder</mat-icon>
                <span title="{{node.data.mountpoint}}">{{ node.data.name }}</span>
            </ng-template>
            <ng-template #treeNodeTemplate let-node *ngIf="(config.explorerType == 'directory') || (config.explorerType == 'dataset') || (config.explorerType == 'file') || !config.explorerType">
                <mat-icon *ngIf="node.data.hasChildren || node.data.children; else fileIcon">folder</mat-icon>
                <ng-template #fileIcon><mat-icon>insert_drive_file</mat-icon></ng-template>
                <span title="{{node.data.name}}">{{ node.data.subTitle }}
                        <div class="dataset-subtitle" 
                        matTooltip="{{'An ACL is present in this path' | translate}}" matTooltipPosition="right"
                        *ngIf="node.data['acl']">ACL
                    </div>
                </span>
            </ng-template>
        </tree-root>
    </div>
    <form-errors [control]="group.controls[config.name]" [config]="config"></form-errors>
	<mat-error *ngIf="config['hasErrors']"><div [innerHTML]="config['errors']"></div></mat-error>
	<mat-error *ngIf="config.warnings"><div [innerHTML]="config.warnings | translate"></div></mat-error>
</div>
